<template>
  <template v-if="!modelData.hidden && !!container.panelItems[modelData.id]">
    <IBizPanelContainerShell
      v-if="modelData.itemType === 'CONTAINER'"
      :controls="controls"
      :modelData="modelData"
      :container="container"
      :controller="container.panelItems[modelData.id]"
    />
    <IBizPanelFieldShell
      v-else-if="modelData.itemType === 'FIELD'"
      :modelData="modelData"
      :controller="container.panelItems[modelData.id]"
    />
    <IBizPanelRawItemShell
      v-else-if="modelData.itemType === 'RAWITEM'"
      :modelData="modelData"
      :controller="container.panelItems[modelData.id]"
    />
    <IBizPanelCtrlPosShell
      v-else-if="modelData.itemType === 'CTRLPOS'"
      :controls="controls"
      :modelData="modelData"
      :controller="container.panelItems[modelData.id]"
    />
  </template>
</template>

<script setup lang="ts">
import { IPanelItem, IControl } from '@ibiz/model-core'
import { IViewLayoutPanelController } from '@ibiz-template/runtime'

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelItem>,
    required: true,
  },
  container: {
    type: Object as PropType<IViewLayoutPanelController>,
    required: true,
  },
  controls: {
    type: Array as PropType<
      {
        modelData: IControl
        slotProps: IData
      }[]
    >,
    default: () => [],
  },
})
</script>
